<template> 
  <div class="kb-copilot"> 
    <div class="kb-copilot__header"> 
      <h1>企业知识库 Copilot</h1> 
      <p>基于 DevUI + MateChat 的智能助手</p> 
    </div> 

    <div class="kb-copilot__layout"> 
      <!-- 左侧：对话区 --> 
      <div class="kb-copilot__chat"> 
        <!-- 1. Prompt 引导区 --> 
        <McPrompt 
          :prompts="prompts" 
          layout="grid" 
          :columns="2" 
          @select="onPromptSelect" 
        /> 

        <!-- 2. 对话主区 --> 
        <div class="kb-copilot__messages"> 
          <McBubble 
            v-for="msg in messages" 
            :key="msg.id" 
            :align="msg.role === 'user' ? 'right' : 'left'" 
            :avatarConfig="{ name: msg.role === 'user' ? 'You' : 'Copilot' }" 
            :loading="msg.loading" 
          > 
            <McMarkdownCard v-if="msg.markdown" :content="msg.markdown" /> 
          </McBubble> 
        </div> 

        <!-- 输入区 --> 
        <div class="kb-copilot__input"> 
          <d-input 
            v-model="input" 
            placeholder="输入你的问题..." 
            @keydown.enter.ctrl="handleSend" 
            style="flex: 1;" 
          /> 
          <d-button type="primary" @click="handleSend"> 
            {{ loading ? '生成中...' : '发送' }} 
          </d-button> 
        </div> 
      </div> 

      <!-- 右侧：3. 结构化结果区 --> 
      <div class="kb-copilot__result"> 
        <d-card title="工单草稿（AI 自动填报）"> 
          <d-tabs v-model="activeTab"> 
            <d-tab-pane title="基本信息" name="0"> 
              <d-form> 
                <d-form-item label="工单标题"> 
                  <d-input v-model="ticket.title" /> 
                </d-form-item> 
                <d-form-item label="优先级"> 
                  <d-select v-model="ticket.priority" :options="priorityOptions" /> 
                </d-form-item> 
                <d-form-item label="问题描述"> 
                  <d-textarea v-model="ticket.description" /> 
                </d-form-item> 
              </d-form> 
            </d-tab-pane> 

            <d-tab-pane title="引用来源" name="1"> 
              <div v-for="source in sources" :key="source.id" class="source-item"> 
                <a :href="source.url" target="_blank">{{ source.title }}</a> 
                <div>{{ source.category }} · 相关度 {{ source.score }}%</div> 
              </div> 
            </d-tab-pane> 

            <d-tab-pane title="执行清单" name="2"> 
              <div v-for="item in checklist" :key="item.id"> 
                <input type="checkbox" v-model="item.checked" /> 
                <label>{{ item.text }}</label> 
              </div> 
            </d-tab-pane> 
          </d-tabs> 
        </d-card> 
      </div> 
    </div> 
  </div> 
</template> 

<script setup lang="ts"> 
import { ref } from 'vue' 
import McBubble from './matechat/McBubble.vue' 
import McPrompt from './matechat/McPrompt.vue' 
import McMarkdownCard from './matechat/McMarkdownCard.vue' 

// Prompt 列表 
const prompts = ref([ 
  { id: 'p1', title: '如何创建研发工单？', icon: '📚' }, 
  { id: 'p2', title: '上线流程有哪些必查项？', icon: '🚀' }, 
  { id: 'p3', title: '接口文档在哪里查？', icon: '📖' }, 
  { id: 'p4', title: '如何排查线上问题？', icon: '🔍' } 
]) 

// 消息列表 
const messages = ref([]) 
const input = ref('') 
const loading = ref(false) 

// 工单信息 
const activeTab = ref('0') 
const ticket = ref({ 
  title: '', 
  priority: 'P2', 
  description: '' 
}) 

const priorityOptions = [ 
  { label: 'P0 - 紧急', value: 'P0' }, 
  { label: 'P1 - 高优', value: 'P1' }, 
  { label: 'P2 - 中优', value: 'P2' }, 
  { label: 'P3 - 低优', value: 'P3' } 
] 

// 引用来源 
const sources = ref([]) 

// 执行清单 
const checklist = ref([]) 

// 选择 Prompt 
const onPromptSelect = (prompt) => { 
  input.value = prompt.title 
  handleSend() 
} 

// 发送消息 
const handleSend = async () => { 
  if (!input.value.trim()) return 

  messages.value.push({ 
    id: Date.now().toString(), 
    role: 'user', 
    content: input.value 
  }) 

  input.value = '' 
  loading.value = true 

  // 模拟 AI 响应 
  setTimeout(() => { 
    messages.value.push({ 
      id: (Date.now() + 1).toString(), 
      role: 'assistant', 
      markdown: '## 研发工单创建流程\n\n**步骤 1**：进入工单系统...' 
    }) 

    // 自动填充工单 
    ticket.value = { 
      title: '研发工单创建流程咨询', 
      priority: 'P2', 
      description: '用户咨询工单创建流程' 
    } 

    // 生成引用来源 
    sources.value = [ 
      { id: '1', title: '研发流程规范文档', url: '#', category: 'Wiki', score: 95 } 
    ] 

    // 生成清单 
    checklist.value = [ 
      { id: '1', text: '阅读相关文档', checked: false }, 
      { id: '2', text: '确认操作权限', checked: false } 
    ] 

    loading.value = false 
  }, 2000) 
} 
</script> 

<style scoped> 
.kb-copilot { 
  min-height: 100vh; 
  background: linear-gradient(135deg, #667eea10 0%, #764ba210 100%); 
  padding: 24px; 
} 

.kb-copilot__layout { 
  display: grid; 
  grid-template-columns: 1fr 400px; 
  gap: 24px; 
  max-width: 1400px; 
  margin: 0 auto; 
} 

.kb-copilot__chat { 
  background: white; 
  border-radius: 12px; 
  padding: 24px; 
} 

.kb-copilot__messages { 
  max-height: 500px; 
  overflow-y: auto; 
  margin: 24px 0; 
} 

.kb-copilot__input { 
  display: flex; 
  gap: 12px; 
  align-items: flex-end; 
} 

.source-item { 
  padding: 12px; 
  background: #f5f5f6; 
  border-radius: 8px; 
  margin-bottom: 8px; 
} 

/* 滚动条样式 */
.kb-copilot__messages::-webkit-scrollbar {
  width: 6px;
}

.kb-copilot__messages::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.kb-copilot__messages::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.kb-copilot__messages::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>